<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="detail_title">
        <span>退货单号：{{order_no}}</span>
      </div>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" prop="creat_time" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images fit">
              <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.thumb" :alt="scope.row.img.split('?image=').pop()">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row.gift_id)">{{scope.row.gift_name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="成本价(元)" prop="money_cost"></el-table-column>
        <el-table-column align="center" label="退货数量(个)" prop="order_num"></el-table-column>
        <el-table-column align="center" label="实收数量(个)" prop="arrive_num"></el-table-column>
        <el-table-column align="center" label="退货金额(元)">
          <template slot-scope="scope">
            {{scope.row.order_num*scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="实收金额(元)" prop="arrive_money"></el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog width="400px" title="礼品其他信息" :visible.sync="infoDialog">
      <div class="info_dialog">
        <div>名称：{{gift_info.gift_name}}</div>
        <div>礼品编号：{{gift_info.id}}</div>
        <div>神采编号：{{gift_info.no_obsolete}}</div>
        <div>国标码：{{gift_info.gb_code}}</div>
        <div>一级类别：{{gift_info.one_type}}</div>
        <div>二级类别：{{gift_info.tow_type}}</div>
        <div>三级类别：{{gift_info.three_type}}</div>
        <div>材质：{{gift_info.texture}}</div>
        <div>产品尺寸：{{gift_info.product_size}}</div>
        <div>包装尺寸：{{gift_info.packing_size}}</div>
      </div>
    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box">
     
      <div class="pull-right total">
        <span>退货种类：{{allType}} 种</span>
        <span>退货数量：{{allNum}} 个</span>
        <span>退货金额 (不包含运费)：{{allTotal|keepTwoNum}} 元</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getGift } from '@/api/warehouse/rtODetail';
export default {
  data() {
    return {
      listLoading: false,
      infoDialog: false,
      saveForm: {
        store_id: ''
      },
      list: [],
      id: '',
      allType: 0,
      allNum: 0,
      allTotal: 0,
      order_no: '',
      status: '',
      type: '',
 
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      },
      gift_info: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (vm.$route.params.routerflag) {
        vm.order_no = vm.$route.params.order_no;
        vm.id = vm.$route.params.id;
        vm.allType = vm.$route.params.type_num;
        vm.allNum = vm.$route.params.num;
        vm.allTotal = vm.$route.params.money;
        vm.status = vm.$route.params.status;
        vm.type = vm.$route.params.type;
        vm.saveForm.store_id = vm.$route.params.store_id;
        vm.fatchData();
      }
    });
  },
  methods: {
    pageCallOf() {
      this.list = [];
      this.rece_info = {};
      this.saveForm.store_id = '';
    },
    //获取礼品信息
    showInfo(id) {
      this.gift_info = {};
      getGift({ id, type: 1, house_id: '', store_id: this.saveForm.store_id }).then(res => {
        if (res.code == 1) {
          res.data.money_cost = (res.data.money_cost / 1).toFixed(2);
          res.data.texture = res.data.texture == 'null' ? '' : res.data.texture;
          this.gift_info = res.data;
          this.infoDialog = true;
        }
      });
    },
    getData(data) {
      data.forEach(val => {
        val.type = 0;
        val.before_num = val.order_num;
        val.money_cost = (val.money_cost * 1).toFixed(2);
        val.all_money = (val.all_money / 1).toFixed(2);
        if (this.type == 1) {
          val.arrive_num = this.status == 20 ? val.order_num : 0;
        }
        val.arrive_money = (val.arrive_num * val.money_cost).toFixed(2);
      });
      this.list = data;
      this.listLoading = false;
    },
    fatchData() {
      this.listLoading = true;
      this.list = [];
      getList({ id: this.id, store_id: this.saveForm.store_id, house_id: '' })
        .then(res => {
          if (res.data.length > 0) {
            this.getData(res.data);
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    
    }
   
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.detail_title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.info_dialog {
  div + div {
    margin-top: 10px;
  }
}
.confirm_dialog {
  border: 1px solid #eee;
  border-radius: 5px;
  .text {
    padding: 10px;
    background: #efefef;
  }
  .checked {
    padding: 10px;
  }
}
.confirm_btn {
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
}
.dialog-footer {
  text-align: right;
}
.gift_num {
  display: flex;
  margin-top: 10px;
  align-items: center;
  .num_tag {
    margin-right: 80px;
  }
}
.gift_img {
  height: 90px;
  text-align: center;
  padding: 10px;
}
.bottom_box {
  .total {
    margin: 8px;
    span {
      margin-right: 20px;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<style scoped>
.app-container >>> .el-dialog textarea {
  border-radius: unset;
  padding: 10px 15px;
}
.row-block {
  width: 100%;
  height: 50%;
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.row-block-full {
  width: 100%;
  height: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
}
</style>